<template>
    <fieldset>
        <legend>列表页</legend>
        <ul>
            <li v-for="item in products" :key="item._id">
                <router-link :to="`/detail/${item.productId}`">{{ item.productName }}</router-link>
            </li>
        </ul>
        <div class="loading" v-if="loading">
            <div class="spin"></div>
            <b>正在加载...</b>
        </div>
    </fieldset>
</template>
<script>

//请求列表数据: http://chst.vip:1234/api/getmoneyctrl

//详情页接口:http://chst.vip:1234/api/getmoneyctrlproduct?productid=20

export default {
    data() {
        return {
            products: [],
            //控制加载动画
            loading: false
        }
    },
    //封装更新列表的函数

    methods: {
        fetchProduct() {
            //一旦调用了,就要打开加载动画
            this.loading = true;
            fetch('http://chst.vip:1234/api/getmoneyctrl')
                .then(response => response.json())
                .then(res => {
                    console.log(res)
                    //赋值给products,进行数据展示
                    this.products = res.result;
                    //拿到结果之后关闭加载动画
                    this.loading = false
                })
        }

    },
    //发起请求
    mounted() {
        console.log(this.$route)
        this.fetchProduct()
    }
}
</script>
<style>
ul {
    padding: 0
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.spin {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    /* border-radius: 50%; */
    /* background-color: #fff; */
    border: 5px solid #e321da;
    /* clip-path:  polygon(100px 0, 0 100px, 100px 200px, 200px 100px); */
    animation: ani 2s linear infinite;
    margin-bottom: 20px;
}

@keyframes ani {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}
</style>